<template>
    <mescroll-uni
        @init="mescrollInit"
        :down="downOption"
        @down="refresh"
        :up="upOption"
        @up="getData"
        :style="themeColor">
        <!-- 数据列表 -->
        <view class="item" v-for="(item, index) in datas" :key="index">
            <view class="item-left">
                <text class="item-name">Plus会员：{{ item.TypeName }}</text>
                <text class="item-time">充值时间：{{ item.AddTime }}</text>
            </view>
            <view class="item-right">
                <text class="item-price">￥{{ item.Price }}</text>
            </view>
        </view>
    </mescroll-uni>
</template>

<script>
import { GetVipBuyRecordFromClient } from "@/service/api/member.js"
export default {
    props: {},
    components: {},
    data() {
        return {
            height: "100px",
            datas: [],
            param: {},
        }
    },
    mounted() {
        //#ifndef MP
        this.refresh()
        //#endif
    },
    methods: {
        getData(page) {
            let param = {}
            param.pageSize = page.size
            param.pageIndex = page.num
            GetVipBuyRecordFromClient(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.Data.length, res.Data.RecordAmout)
                    this.datas = this.datas.concat(res.Data.Data)
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },
        refresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.item {
    padding: 40rpx $app-page-padding;
    background: $color-white;
    display: flex;
    flex-direction: row;
    border-bottom: solid 1rpx $border;
    .item-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        .item-name {
            font-size: $font-size-30;
            font-weight: 700;
            margin-bottom: 8rpx;
        }
        .item-time {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
    .item-right {
        .item-price {
            font-size: $font-size-34;
            color: $color-orange-1;
            font-weight: 700;
        }
    }
}
</style>
